<template>
	<view class="app">
		<view class="u-skeleton">
			<view class="title u-skeleton-fillet">{{ data.title }}</view>
			<view class="time-view-count">
				<view class="time u-skeleton-fillet">
					{{ $fn.timeFormat(data._add_time) }}
				</view>
				<view class="view-count">
					<text class="u-skeleton-fillet text">
						阅读 {{ $fn.numStr(data.view_count) }}
					</text>
				</view>
			</view>
			<view class="content u-skeleton-fillet">
				<u-parse :html="data.content"></u-parse>
			</view>
		</view>
		<!--骨架屏组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#fff"></u-skeleton>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖

export default {
	data() {
		return {
			// init请求返回的数据
			data: {
				_id: "",
				content: "",
				sort: "",
				status: "",
				title: "",
				update_time: "",
				url: "",
				user_id: "",
				_add_time: "",
				view_count: ""
			},
			// 表单请求数据
			form1: {},
			scrollTop: 0,
			loading: true
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
	onLoad(options = {}) {
		this.options = options
		this.init(options)
	},
	methods: {
		// 页面数据初始化函数
		init(options) {
			let that = this
			that.loading = true
			const eventChannel = that.getOpenerEventChannel() // that 需指向 this
			// 监听data事件，获取上一页面通过eventChannel.emit传送到当前页面的数据
			if (eventChannel.on) {
				eventChannel.on("data", data => {
					data.view_count++
					that.data = data
					that.loading = false
				})
			}
			vk.callFunction({
				url: "client/user.queryNoticeInfo",
				data: { _id: options._id },
				success: data => {
					that.data = data.info
				},
				complete: () => {
					that.loading = false
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	padding: 30rpx;
}

.title {
	font-weight: bold;
	font-size: 34rpx;
	margin-bottom: 20rpx;
	letter-spacing: 2rpx;
	min-height: 44rpx;
}

.time-view-count {
	display: flex;
	align-items: center;
	color: #9a9a9a;
	font-size: 28rpx;
	.time {
		min-height: 40rpx;
		flex: 1;
	}
	.view-count {
		min-height: 40rpx;
		margin-left: 20rpx;
	}
}

.content {
	margin-top: 80rpx;
	letter-spacing: 2rpx;
	min-height: 400rpx;
}

.text.u-skeleton-fillet {
	min-width: 150rpx;
	display: inline-block;
}
</style>
